<template>
  <div class="profile-container">
    <h2>个人中心</h2>

    <!-- 零工用户信息 -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <el-button 
            type="primary" 
            size="small" 
            @click="editWorkerInfo" 
            :icon="isEditingWorker ? 'Check' : 'Edit'"
            style="display: flex; align-items: center; justify-content: center; gap: 5px"
          >
            {{ isEditingWorker ? '保存' : '编辑' }}
          </el-button>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="4" animated />
      </div>

      <div v-else-if="workerInfo" class="worker-info">
        <el-form ref="workerFormRef" :model="workerInfo" :disabled="!isEditingWorker" label-width="120px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="workerInfo.name" />
          </el-form-item>

          <el-form-item label="联系方式" prop="phone">
            <template v-if="isEditingWorker">
              <el-input v-model="workerInfo.phone" />
            </template>
            <template v-else>
              <el-input :value="maskPhone(workerInfo.phone)" readonly />
            </template>
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard">
            <template v-if="isEditingWorker">
              <el-input v-model="workerInfo.idCard" />
            </template>
            <template v-else>
              <el-input :value="maskIdCard(workerInfo.idCard)" readonly />
            </template>
          </el-form-item>

          <el-form-item label="银行账户" prop="bankAccount">
            <template v-if="isEditingWorker">
              <el-input v-model="workerInfo.bankAccount" />
            </template>
            <template v-else>
              <el-input :value="maskBankAccount(workerInfo.bankAccount)" readonly />
            </template>
          </el-form-item>

          <el-form-item label="擅长工种" prop="skillType">
            <el-select v-model="workerInfo.skillType" placeholder="请选择擅长工种" style="width: 100%">
              <el-option label="技术开发" value="技术开发" />
              <el-option label="市场营销" value="市场营销" />
              <el-option label="设计创意" value="设计创意" />
              <el-option label="客户服务" value="客户服务" />
              <el-option label="文案撰写" value="文案撰写" />
              <el-option label="数据分析" value="数据分析" />
              <el-option label="教育培训" value="教育培训" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <el-empty v-else description="暂无个人信息" />
    </el-card>

    <!-- 账户信息 -->
    <el-card class="account-card">
      <template #header>
        <div class="card-header">
          <span>账户信息</span>
        </div>
      </template>
      <div class="account-info">
        <p><strong>用户名：</strong> {{ username }}</p>
        <p><strong>用户类型：</strong> 零工用户</p>
        <p><strong>注册时间：</strong> {{ registerTime }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getWorkerInfo, updateWorkerInfo } from '@/api/worker'

const username = ref(localStorage.getItem('username') || '用户')
const loading = ref(false)
const workerInfo = ref(null)
const isEditingWorker = ref(false)
const registerTime = ref('2023-10-01 12:00:00')
const workerFormRef = ref(null)

onMounted(() => {
  loadUserInfo()
})

const loadUserInfo = async () => {
  loading.value = true
  try {
    const response = await getWorkerInfo()
    workerInfo.value = response.data
  } catch (error) {
    console.error('加载信息失败:', error)
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

const editWorkerInfo = async () => {
  if (isEditingWorker.value) {
    try {
      await updateWorkerInfo(workerInfo.value)
      ElMessage.success('个人信息更新成功')
      isEditingWorker.value = false
    } catch (error) {
      ElMessage.error('更新个人信息失败')
    }
  } else {
    isEditingWorker.value = true
  }
}

const maskPhone = phone => phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
const maskIdCard = id => id ? id.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2') : ''
const maskBankAccount = acc => acc ? acc.replace(/(\d{4})\d+(\d{4})/, '$1********$2') : ''
</script>

<style scoped>
.profile-container {
  padding: 30px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
}

h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info-card, .account-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.info-card:hover, .account-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: #6a11cb;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(106, 17, 203, 0.1);
}

.loading-container {
  padding: 20px;
}

.account-info, .worker-info {
  padding: 20px;
}

.account-info p {
  line-height: 1.8;
  margin: 12px 0;
  color: #5a5a5a;
}

.el-button {
  margin-left: auto;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
}

.el-button:active {
  transform: translateY(0);
}

.el-input, .el-select {
  border-radius: 8px;
}

.el-select :deep(.el-select__input) {
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid #e0e0e0;
}

.el-select :deep(.el-select__input):focus {
  border-color: #6a11cb;
  box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.2);
}

.el-form-item :deep(.el-form-item__label) {
  color: #6a5acd;
  font-weight: 500;
}

.el-empty {
  padding: 40px 0;
}

.el-empty :deep(.el-empty__description) {
  color: #888;
}
</style>